<template>
	<view class="mineBox">
		<view class="contentBox">
            <uv-navbar title="我的" titleStyle="fontSize:36rpx;color:#fff;font-weight:bold" leftIconSize="0" bg-color="RGBA(0, 197, 132, 1)" :placeholder="true" ></uv-navbar>
			<view class="authBox">
				<view class="imgBox">
					<image v-if="userInfo.avatar" :src="userInfo.avatar" mode=""></image>
                    <image v-else src="/static/images/my/avatar.png" mode=""></image>
					
				</view>
				<view class="personInfo">
					<view class="nickText" @click="login" >
						{{userInfo.nickname||'请登录'}}
					</view>
					<view class="nameText">
						
						{{userInfo.mobile}}
					</view>
				</view>
                <image @click="toUser" style="width: 33rpx;" src="/static/images/my/i8.png" mode="widthFix"></image>
			</view>
			<view class="cardBox">
                <view class="cardtitle">
                    我的服务
                </view>
                <view class="carditemBox">
                    <view class="cardItem"  @click="shareGoDetail('/pages/order/index')">
                          <image src="/static/images/my/n1.png" mode="widthFix"></image>
                          <text>我的下单</text>
                     </view>
                    <view class="cardItem"  @click="shareGoDetail('/pages/myMeetingBall/index')">
                         <image src="/static/images/my/n2.png" mode="widthFix"></image>
                         <text>我的约球</text>
                     </view>
                     <view class="cardItem"  @click="shareGoDetail('/pages/myMeetingTable/index')">
                          <image src="/static/images/my/n3.png" mode="widthFix"></image>
                          <text>我的约台</text>
                     </view>
                     <view class="cardItem"  @click="shareGoDetail('/pages/myTable/index')">
                          <image src="/static/images/my/n4.png" mode="widthFix"></image>
                          <text>我的擂台</text>
                     </view>
                    
                     <view class="cardItem"  @click="shareGoDetail('/pages/helpTeacher/index')">
                          <image src="/static/images/my/n5.png" mode="widthFix"></image>
                          <text>我的助教</text>
                     </view>
                </view>
               
			</view>
           
			
		</view>
        <view class="shareCard">
        	<button class="shareItem" open-type="contact" @contact="contact"  >
        		<view class="leftItem">
        			<image src="/static/images/my/i1.png" mode="widthFix"></image>
        			<text>联系客服</text>
        		</view>
        		<view class="">
        			<uv-icon name="arrow-right"></uv-icon>
        		</view>
        	</button>
            <view class="shareItem" @click="tourl('/pages/privacy/index?id=49')">
            	<view class="leftItem">
            		<image src="/static/images/my/i2.png" mode="widthFix"></image>
            		<text>关于我们</text>
            	</view>
            	<view class="">
            		<uv-icon name="arrow-right"></uv-icon>
            	</view>
            </view>
            <view class="shareItem" @click="tourl('/pages/problem/index')">
            	<view class="leftItem">
            		<image src="/static/images/my/i3.png" mode="widthFix"></image>
            		<text>常见问题</text>
            	</view>
            	<view class="">
            		<uv-icon name="arrow-right"></uv-icon>
            	</view>
            </view>
            <view class="shareItem"  @click="tourl('/pages/suggest/index')">
            	<view class="leftItem">
            		<image src="/static/images/my/i4.png" mode="widthFix"></image>
            		<text>投诉建议</text>
            	</view>
            	<view class="">
            		<uv-icon name="arrow-right"></uv-icon>
            	</view>
            </view>
            <view class="shareItem" @click="tourl('/pages/privacy/index?id=46')">
            	<view class="leftItem">
            		<image src="/static/images/my/i5.png" mode="widthFix"></image>
            		<text>服务协议</text>
            	</view>
            	<view class="">
            		<uv-icon name="arrow-right"></uv-icon>
            	</view>
            </view>
            <view class="shareItem" @click="tourl('/pages/privacy/index?id=47')">
            	<view class="leftItem">
            		<image src="/static/images/my/i6.png"  mode="widthFix"></image>
            		<text>隐私政策</text>
            	</view>
            	<view class="">
            		<uv-icon name="arrow-right"></uv-icon>
            	</view>
            </view>
            <button open-type="share"  class="shareItem" >
            	<view class="leftItem">
            		<image src="/static/images/my/i7.png" mode="widthFix"></image>
            		<text>邀请好友</text>
            	</view>
            	<view class="">
            		<uv-icon name="arrow-right"></uv-icon>
            	</view>
            </button>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleHeight:'',
				titleTops:'',
				
				user_id:uni.getStorageSync('userId'),
				userInfo:{}
			}
		},
		onReady() {
			// #ifdef MP
				uni.getSystemInfo({
					success: (e) => {
						this.titleTops = e.statusBarHeight;
						let custom = uni.getMenuButtonBoundingClientRect();
						this.titleHeight = custom.height + (custom.top - e.statusBarHeight) * 2;
					}
				})
			// #endif
			
		},
        onShow() {
          this.getUserInfo()  
        },
        onShareAppMessage() {
            return{
                url:"/pages/tabbar/index"
            }
        },
		methods:{
            tourl(url){
					
				// if(!uni.getStorageSync('logintoken')){
				// 	uni.reLaunch({
				// 		url:'/pages/login/login'
				// 	})
				// 	return
				// }
              uni.navigateTo({
                  url:url
              })  
            },
				
			login(){
				if(!uni.getStorageSync('logintoken')){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					return
				}
			},
            toUser(){
                    uni.navigateTo({
                        url:'/pages/set/index'
                    })
            },
            async getUserInfo(){
             const {data} =  await this.$api.userinfo({user_id:this.user_id})
             
			 
             this.userInfo= data.user
			 uni.setStorageSync('userInfo',data.user)
            },
			//跳往常见问题页面
			shareGoDetail(pageUrl,name){
				
				
				uni.navigateTo({
					url:pageUrl
				})
			}
		}
	}
</script>

<style scoped lang="scss">
  .mineBox{
	  position: relative;
	  .bgk{
		  position: absolute;
		  top: 0rpx;
		  left: 0rpx;
		  image{
			  width: 750rpx;
			  height: 426rpx;
		  }
	  }
	  .titleText{
		  position: relative;
		  z-index: 22;
		  text-align: center;
		  font-size: 32rpx;
		  color: #FFFFFF;
	  }
	  .contentBox{
          background-image: url('@/static/images/my/bg.png');
          background-size: 100% 466rpx;
          background-position: center;
          background-repeat: no-repeat;
		  position: relative;
		  z-index: 22;
          height: 616rpx;
          padding-top:40rpx;
		  .authBox{
			  margin:0 50rpx 0 33rpx;
			   // margin-top: 30rpx;
			  display: flex;
              justify-content: space-between;
			  .imgBox{
				  width: 128rpx;
				  height: 128rpx;
				  border-radius: 50%;
				  overflow: hidden;
				  image{
					  width: 128rpx;
					  height: 128rpx;
				  }
			  }
			  .personInfo{
				  margin-left: 15rpx;
                  flex: 1;
				  .nickText{
					  font-size: 32rpx;
					  color: #FFFEFE;
					  font-weight: 600;
					  margin: 15rpx 0rpx 10rpx 0rpx;
				  }
				  .nameText{
					  font-size: 30rpx;
					  color: #FFFEFE;
					  text{
						  position: relative;
						  top:-4rpx;
						  margin: 0rpx 8rpx 0rpx;
					  }
				  }
			  }
		  }
		  .cardBox{
			  width: 711rpx;
			  // height: 307rpx;
			  padding: 26rpx 26rpx 50rpx;
			  background: #FFFFFF;
			  border-radius: 20rpx;
			  margin: 0 auto;
			  margin-top: 40rpx;
			 
              .cardtitle{
                  font-weight: 500;
                  font-size: 32rpx;
                  color: #333333;
                  border-bottom: 1rpx solid #F2f2f2;
                  padding-bottom: 26rpx;
              }
              .carditemBox{
                  display: flex;
              }
			  .cardItem{
				  width: 20%;
				  display: flex;
				  flex-direction: column;
				  align-items: center;
				  font-size: 26rpx;
				  color: #333333;
				  image{
					  width: 86rpx;
					  height: 86rpx;
					  margin: 20rpx 0 ;
				  }
			  }
		  }
		
	  }
  }
  .shareCard{
  			  width: 710rpx;
  			  background: #FFFFFF;
  			  border-radius: 20rpx;
  			  margin: 21rpx auto;
  			  padding: 22rpx;
              position: relative;
              margin-top: 80rpx;
              z-index: 99;
  			  .shareItem{
  				  display: flex;
  				  justify-content: space-between;
  				  height: 80rpx;
  				  align-items: center;
                
  				  border-bottom: 1px solid #E4E4E4!important;
  				  &:last-child{
  					  border:none;
  				  }
  				  .leftItem{
  					  display: flex;
  					  align-items: center;
  					  
  					  font-size: 28rpx;
  					  color: #333;
  					  image{
  						 width: 38rpx;
  						 
  						 margin-right: 14rpx;
  					  }
  				  }
  			  }
  }
</style>
